<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container" style="height: 100%;">
      <el-row style="background:#fff;padding:16px 16px 0;height: 11%">
        <div class="chart-wrapper img-wrapper">
          <div class="font1">海诚·云工场项目启动情况（总数：<span>{{ totalData }}</span>）</div>
          <div class="font-right"><span class="legend-square" />项目总数</div>
        </div>
      </el-row>
      <el-row style="background:#fff;padding:0px 0px 0;height: 55%;">
        <el-col :span="14" class="chart-wrapper" style="position: relative">
          <div class="year-select">
            <el-select v-model="startYear" placeholder="开始年份" style="width: 100px;" @change="handleYearChange(true)">
              <el-option
                v-for="(item, index) in startList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            至
            <el-select v-model="endYear" placeholder="结束年份" style="width: 100px;" @change="handleYearChange(false)">
              <el-option
                v-for="(item, index) in endList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

          <category ref="projectRef" @projectTotalData="projectTotalData" @updateYearOptions="updateYearOptions" />
        </el-col>
        <el-col :span="10" style="height: 100%">
          <DCharts ref="cubeRef" />
        </el-col>
      </el-row>
      <el-row style="background:#fff;padding:0px 0px 0;height: 22%;">
        <div class="chart-wrapper myImg" />
      </el-row>
    </div>
  </div>
</template>

<script>
import Category from './Category'
import DCharts from './3DCharts'
import eventBus from '../../../../api/information/eventBus'
import { buildYearSelect } from '@haisum-cloud/ui-components/packages/utils'
export default {
  name: 'PageHome',
  components: {
    Category, DCharts

  },
  data() {
    return {
      startYear: '',
      endYear: '',
      startList: [],
      endList: [],
      graphShow: false,
      /* lineChartData: lineChartData.newVisitis*/
      totalData: '',
      /* 2022/5/31修改：第一次进入首页变量标志*/
      num: 0
      /* 如果切换到首页就显示公告不用使用vuex，可在下面created函数eventBus代入showView*/
      /* showView: true// 标志是否在首页，显示公告*/
    }
  },
  created() {
    /* 向Navbar组件传值*/
    eventBus.$emit('showView', this.$store.getters.announcement)
    /* 2022/5/31修改*/
    this.num++
    /* 更新vuex里的num值*/
    this.$store.commit('updateNum', this.num)
    /**/
  },
  methods: {
    handleYearChange(isStart = false) {
      if (isStart && this.endYear && this.startYear && this.endYear < this.startYear) {
        this.startYear = ''
      }
      if (!isStart && this.endYear && this.startYear && this.endYear < this.startYear) {
        this.endYear = ''
      }
      this.$refs['projectRef'].updateChartBySelect(this.startYear, this.endYear)
      // 过滤数据
    },
    updateYearOptions({ minYear, maxYear }) {
      // 更新开始的时间
      this.startList = buildYearSelect(minYear, maxYear)
      this.endList = buildYearSelect(minYear, maxYear)
      this.startYear = minYear
      this.endYear = maxYear
    },
    showGraph() {
      this.graphShow = true
    },
    projectTotalData(total, cubeData) {
      this.totalData = total
      this.$refs.cubeRef.updateChart(cubeData)
    }
  }
}
</script>

<style lang="scss" scoped>
html,body {
  height: 100%;
  width: 100%;
  overflow: auto !important;
}
.dashboard-container{
  height: 100%;
  overflow: auto;
}
.dashboard-editor-container {
  .img1{
    width: 6%;
    margin: 0px;
    padding: 0;
  }
  .chart-wrapper {
    background: #fff;
    height: 100%;
    padding: 21px 10px 0;
    margin-bottom: 32px;
    .font1{
      font-size: 30px;
      font-weight: bolder;
      span{
        color: var(--ui-theme-color);
        font-size: 50px;
        font-family: Times New Roman;
      }
    }
    .font-right{
      float: right;
      margin-right: 181px;
      margin-top: -35px;
    }
    .legend-square {
      width: 7px;
      height: 7px;
      background: linear-gradient(180deg, #4ACDD6 0%, #0DAAB5 100%);
      display: inline-block;
      margin-right: 10px;
      border-radius: 2px;
    }
  }
  .myImg{
    padding: 0px 0px 0;
    margin-bottom: 0px;
    width: 100%;
    height: 100%;
    background: url("../../../../assets/images/home2.png") no-repeat;
    background-size: contain;
    background-position: center center;
  }
}
::v-deep .el-dialog__body{
  padding: 0px 0px !important;
  margin: 0px;
}
  .year-select{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap:10px;
    position: absolute;
    right: 0;
    top:0;
    width: 100%;
    z-index: 999;
  }
</style>
